Ext.onReady(function(){
    Ext.create('Ext.panel.Panel', {
    // title: 'Accordion Layout',
    width: 300,
    height: 350,
    title:'Hello',
    defaults: {
        bodyStyle: 'padding:15px'
    },
    layout:{
        type:'border'
    },
    items: [{
        xtype:'label',
        html:'Hello World'
    },{
    	region:'east',
        title:'Helo',
        collapsible: true,  
        xtype:'panel',
        // componentCls:'x-tool-before-title',
        listeners:{
        	collapse:function( p,eOpts ){
        		var x = p.componentCls;
        		x.style="position:absolute; margin-right: 80;";
				
        	}
        },
        layout:{
            type: 'accordion',
            titleCollapse: true,
            animate: true,
            collapseFirst :true,
            reserveScrollbar : true,
            fill : true

        },
        defaults:{
            itemCls:true,
            style:'margin-bottom:5px;'
        },
        padding:'15 0 10 15',
        width:300,
        height:300,
        id:'democon',
        items:[{
                title: 'Panel 1',
                id:'1',
                autoScroll :true,
                layout:{
                    type: 'form'
                },
                listeners :{

                },
                items:[{
                    xtype:'container',
                    items:[{
                        xtype:'checkbox',
                        boxLabel :'Helo ,what can i help you ?'
                    },{
                        xtype:'textfield',
                        fieldLabel:'Hello My Text Label?',
                        labelWidth:150,
                        labelSeparator :''
                    },{
                        xtype:'textfield',
                        fieldLabel:'Hello My Text Label?',
                        labelWidth:150,
                        labelSeparator :''
                    },{
                        xtype:'textfield',
                        fieldLabel:'Hello My Text Label?',
                        labelWidth:150,
                        labelSeparator :''
                    },{
                        xtype:'checkbox',
                        boxLabel :' what can i do for you ?'
                    },{
                        xtype:'checkbox',
                        boxLabel :'Helo ,what can i help you ?'
                    }]
                }]
            },{
                id:'2',
                title: 'Panel 2',
                html: 'Panel content!'
            },{
                id:'3',
                title: 'Panel 3',
                html: 'Panel content!'
            }]
    }],
    buttons:[{
      text:'',
      iconCls:'next',
      handler:function(){
        setTimeout( 5000);
        var items = Ext.getCmp('democon').items;
        var items0 = items.items[0];
        for (var i = 0; i <items.length; i++) {
            if(!items.items[i].collapsed){
                if(i==(items.length-1)){
                    items0.expand();
                    break;
                }else{
                    items.items[i+1].expand();
                    break; 
                }
                  
            }
        };
      }
    }],
    renderTo: Ext.getBody()
    });
});